<template>
	<scroll-view class="wrap" scroll-y="true">
		<view style="height: 20rpx;"></view>
		<view v-for="(item,index) in rows" v-show="isLoadDowning == 0" :key="index" @tap="detail(item.workID)">
			<view class="relative">
				<view class="tops">
					<view class="time">
						2022-03-14
					</view>
					<!-- <view class="time">
						{{item.createTime}}
					</view> -->

					<!-- <view class="code">
						<text
							:style="item.workState==1?'color:#19be6b':item.workState==2?'color:#19be6b':item.workState==3?'color:#ff6d00':item.workState==4?'color:#ff6d00':item.workState==5?'color:#ff0200':item.workState==6?'color:#777':item.workState==6?'color:#777':item.workState==6?'color:#19be6b':''">{{item.workState==1?'待处理':item.workState==2?'处理中':item.workState==3?'处理完毕':item.workState==4?'验收中':item.workState==5?'验收驳回':item.workState==6?'终止':item.workState==7?'工单撤回':item.workState==8?'验收完毕':''}}</text>
					</view> -->
					<view class="code">
						<!-- 维修状态： -->
						<text>待处理</text>
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="top">
					<view class="top-h">
						<text>类型：</text>
						<!-- <text>{{item.workType==1?'保洁':item.workType==2?'维修':item.workType==3?'搬家':''}}</text> -->
						<text>搬家</text>
					</view>
					<!-- <view class="top-h">
						{{item.workId}}
					</view> -->
				</view>
				<view class="information">
					<text style="margin-right:5px;">createBy</text>roomNum｜
					<!-- <text style="margin-right:5px;">{{item.createBy}}</text>{{item.roomNum}}｜ -->
					<text style="margin-right:5px;">当前处理人：</text>updateBy
				</view>
				<view class="information">
					<text style="margin-right:5px;">contractForm</text>
					<!-- <text style="margin-right:5px;">{{item.contractForm}}</text> -->
					<!-- 是否在保：{{item.warrantyType==1?'是':'否'}} -->
				</view>

				<view class="mon">
					<text style="color: #999;">指派人：</text>
					<!-- <text style="color: #999;">{{item.userName}}</text> -->
					<text style="color: #999;">xiaoli</text>
				</view>
				<!-- <view class="btn">
					<view class="btn-gn wrap-sh" @tap.stop="makePhone(item.deptId)">
						电话咨询
					</view>
					<view class="btn-gn wrap-sh" @tap.stop="clickWx(item.deptId)">
						管家微信
					</view>
				</view> -->
			</view>
		</view>

		<div class="load" v-show="isLoadDowning == 1">
			<img class="loadImg" src="https://gateway.yijushenyang.com/static/img/loading.png" alt="">
			<view style="height: auto;line-height: 0;color: #999;">加载中</view>
		</div>
		<div class="load" v-show="isLoadDowning == 2">
			<img src="https://gateway.yijushenyang.com/img/none.png"
				style="margin: 0 auto; margin-top: 40px; width: 50px; height:50px;" alt="">
			<view class="" style="margin-top: 10px; color: #999;line-height: 0;">
				暂无数据
			</view>
		</div>

		<div class="btn-ljzf" v-show="!popup" @tap.stop="getpopup">提起工单</div>

		<uni-popup ref="popup" type="bottom" background-color="#fff" safe-area:true :mask-click="false">
			<scroll-view class="popup" scroll-y="true">
				<div class="h" style="display: flex;">
					<div style="padding: 20rpx;font-size: 36rpx;font-weight: bold;width:70%;">填写工单信息</div>
					<img class="close_icon" src="../../static/close.png" alt="" @tap.stop="getclose">
				</div>

				<view class="form_item" style="margin-top: 90rpx;">
					<view class="label">
						<text class="label_text">*</text><text>服务类型</text>
					</view>
					<picker class="input" :value="typeIndex" :range="type" @change="typePciker">
						<view v-if="typeIndex==''">
							请选择服务类型
						</view>
						<view v-else>
							<view>
								{{type[typeIndex]}}
							</view>
						</view>
					</picker>
				</view>
				<view class="form_item">
					<view class="label">
						<text class="label_text">*</text><text>房号</text>
					</view>
					<picker class="input" :value="roomIndex" :range="room" @change="roomPciker">
						<view v-if="roomIndex==''">
							请选择房号
						</view>
						<view v-else>
							<view>
								{{room[roomIndex]}}
							</view>
						</view>
					</picker>
				</view>
				<view class="form_item" style="border: none;">
					<view class="label">
						<text class="label_text"></text><text>备注</text>
					</view>
				</view>
				<textarea v-model="text" placeholder="若有需求,请提前备注" />
				<div style="width: 100%;height: 40rpx;"></div>
				<div class="pupopBtn_no" @tap.stop="submit">确认</div>
			</scroll-view>
		</uni-popup>


		<view style="height: 80rpx;"></view>
	</scroll-view>
</template>

<script>
	import {
		throttle
	} from "@/utils/throttle.js"
	export default {
		data() {
			return {
				menuLists: [],
				tabs1Current: 0,
				pageNum: 1,
				pageSize: 10,
				isLoadDowning: 0,
				loadBottom: true,
				popup: false,
				list: [],
				rows: [],
				parem: [],
				permission: uni.getStorageSync('permission'),
				postCode: uni.getStorageSync('user'),
				room: [],
				roomIndex: '',
				type: ['保洁', '维修', '搬家'],
				typeIndex: '',
				text: '',
				roomId: '',
			}
		},
		onLoad() {},

		onShow() {
			if (uni.getStorageSync('openId')) {
				this.init()
			}
		},

		onReachBottom() {
			if (this.loadBottom) {
				this.pageNum += 1;
				if (this.pageNum <= Math.ceil(this.list.total / this.pageSize)) {
					this.isLoadDowning = 1
					this.init()
				}
			} else {
				this.isLoadDowning = 2
			}
		},

		methods: {
			submit() {
				if (this.typeIndex == '' || this.typeIndex == null) {
					uni.showToast({
						title: '请选择服务类型',
						icon: 'none',
						duration: 1500,
					});
				} else if (this.roomIndex == '' || this.roomIndex == null) {
					uni.showToast({
						title: '请选择房号',
						icon: 'none',
						duration: 1500,
					});
				} else {
					let data = {
						roomId: this.roomId,
						openId: uni.getStorageSync('openId'),
						workType: Number(this.typeIndex) + 1,
						content: this.text,
					}
					this.api.post('gongdan/work/app/initiateWork', data).then((res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 1500,
							});
							setTimeout(() => {
								this.getclose()
							}, 500)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
							});
						}
					})
				}
			},

			roomPciker(index) {
				this.roomIndex = index.detail.value
			},
			typePciker(index) {
				this.typeIndex = index.detail.value
			},
			getpopup() {
				this.$refs.popup.open()
			},

			getclose() {
				this.$refs.popup.close()
			},
			// getPermission() {
			// 	let data = {
			// 		openId: uni.getStorageSync('openId')
			// 	}

			// 	this.api.get('hetong/refund/app/selPostCodeApp', data).then(res => {
			// 		console.log(res);
			// 		uni.setStorageSync('user', res.data.postCode)
			// 		uni.setStorageSync('userDeptId', res.data.userDeptId)

			// 		this.init()
			// 	})
			// },

			init() {
				let old = this.rows
				let data = {
					postCode: uni.getStorageSync('user'),
					userDeptId: uni.getStorageSync('userDeptId'),
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				if (uni.getStorageSync("openId")) {
					this.api.get('hetong/refund/app/listApp', data).then(res => {
						if (res.data.code == 200) {
							this.list = res.data
							let news = res.data.rows
							if (res.data.total == 0) {
								this.isLoadDowning = 2
								this.loadBottom = false
							} else if (this.pageNum == 1) {
								this.rows = res.data.rows
								this.isLoadDowning = 0
							} else if (this.pageNum > 1) {
								this.rows = old.concat(news)
								this.isLoadDowning = 0
							}

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
							});
						}
					})
				} else {
					this.loginTip()
				}
			},

			loginTip() {
				uni.showToast({
					title: '请登陆',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 2000);
			},

			detail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/my/maintenance-detail?workID=" + item
				})
			},

			sh(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/my/handle-process?refundId=" + item + '&refundChange=H'
				})
			},
		}
	}
</script>

<style>
	@import '/common/css/my/reservation.scss';
	@import '/common/css/pupop.scss';
	@import '/common/css/form.scss';
</style>

<style lang="scss">
	.wrap {
		@include wrap background: #e6e6e6;
	}

	.btn-ljzf {
		position: fixed;
		right: 90rpx;
		bottom: 200rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		padding: 18rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
		background: linear-gradient(90deg, #ffa748 0%, #ff9034 100%);
		z-index: 9;
		box-shadow: 0.5px 0.5px 6px 0px rgba(81, 39, 4, 0.5);
		font-size: 24rpx;
	}

	.load {
		width: 100%;
		height: 20vh;
		line-height: 20vh;
		text-align: center;
		color: black;
		font-size: 32rpx;
		margin: 0 auto;
	}

	.loadImg {
		width: 250rpx;
		height: 250rpx;
		margin-top: 100rpx
	}

	.relative {
		width: 700rpx;
		margin: 0 auto;
		// margin-bottom: 30rpx;
		border-radius: 15rpx 15rpx 0 0;
	}

	.tops {
		width: 620rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 25rpx 25rpx 20rpx;
		margin: 0 auto;
		font-size: $p;
		font-weight: bold;
		@include omit;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e0dde2;
		background-color: white;
		border-radius: 15rpx 15rpx 0 0;
	}

	.btn {
		width: 90%;
		position: absolute;
		display: flex;
		justify-content: flex-end;
		right: 30rpx;
		bottom: 25rpx;
		gap: 20rpx
	}

	.btn-gn {
		width: 110rpx;
		padding: 10rpx 15rpx;
		font-size: 22rpx;
		border-radius: 50rpx;
		// border: 1rpx solid black;
		text-align: center;
	}

	.top {
		// width: 680rpx;
		padding: 25rpx 35rpx 10rpx;
		font-size: $p;
		font-weight: bold;
		@include omit;
	}

	.code {
		height: 40rpx;
		line-height: 40rpx;
		padding: 2rpx 10rpx;
		// color: white;
		color: #19be6b;
		// background-color: #00c6ff;
		border-radius: 10rpx;
	}

	.code-n {
		height: 40rpx;
		line-height: 40rpx;
		padding: 2rpx 10rpx;
		// color: white;
		color: #bbbab4;
		// background-color: #bbbab4;
		border-radius: 10rpx;
	}

	.notice {
		width: 700rpx;
		position: relative;
		margin: 0 auto;
		margin-bottom: 30rpx;
		background-color: white;
		border-radius: 0 0 15rpx 15rpx;
		padding-bottom: 70rpx;
	}
</style>